<template>
  <div class="comparison-wrap">
    <el-form size="small" label-width="80px">
      <el-form-item label="附件" v-if="fileList.length > 0">
        <el-upload
          action=""
          class="upload-demo"
          :disabled="true"
          :on-preview="handlePreview"
          :file-list="fileList">
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="order-grid">
      <div
        v-for="(contrast, index) in contrastProductTable"
        :key="contrast.orderCode || index"
        class="order-card"
        :class="{ selected: glOrderCode.indexOf(contrast.orderCode) > -1 }"
      >
        <el-form label-width="80px" class="order-form">
          <el-row :gutter="10" class="order-form-row">
            <el-col :span="12" class="order-radio-col">
              <el-form-item label="比价单">
                  {{ contrast.orderCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12" class="ta-r">
              <el-button
                type="info"
                plain
                icon="el-icon-upload2"
                size="mini"
                @click.stop="handleAlterStatus(contrast, index)"
              >{{ contrast.showFlag ? '隐藏' : '展开' }}</el-button>
            </el-col>
          </el-row>

          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="厂家">{{ contrast.manufacturerName || '-' }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="交货期">
                <span v-if="contrast.jhValid">{{ contrast.jhValid + '天' }}</span>
                <span v-else>无</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总价">{{ contrast.allPrice || '-' }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 商品信息 -->
        <div class="goods-title">商品信息</div>
        <el-table :data="contrast.products" v-show="contrast.showFlag" :row-class-name="tableRowClassName">
          <el-table-column type="index" width="55" align="center" label="序号"/>
          <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
          <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="产品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="计数单位" align="center" prop="unitName"/>
          <el-table-column label="商品数量" align="center" prop="productNum"/>
          <el-table-column label="商品单价" align="center" prop="onlyPrice"/>
          <el-table-column label="商品总价" align="center" prop="allPrice"/>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getPriceComparisonAuditInfo } from "@/api/wms/auditOrder";

export default {
  name: "ComparisonProduct",
  props: {
    glOrderCode: {
      type: String,
      default: null
    },
    auditId: {
      type: Number,
      default: null
    },
    openFlag: {
      type: Boolean
    }
  },
  data() {
    return {
      prefix: process.env.VUE_APP_BASE_API,
      loading: false,
      contrastProductTable: [],
      fileList: []
    }
  },
  created() {
    this.getAuditInfo()
  },
  methods: {
    getAuditInfo() {
      this.loading = true
      getPriceComparisonAuditInfo({id: this.auditId}).then(res => {
        if (res.code === 200) {
          let data = res.data
          this.contrastProductTable = data.priceComparisonOrders

          let accessoryList = data.accessoryList;
          if (accessoryList && accessoryList.length > 0) {
            accessoryList.forEach(item => {
              let urls = item.split("/")
              this.fileList.push({name: urls[urls.length - 1], url: this.prefix + item})
            })
          }
        }
      }).finally(e => {
        this.loading = false
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.isSelected) {
        return 'success-row';
      }
      return '';
    },
    // 文件点击事件
    handlePreview(file){
      window.open(file.url,'_blank');
    },
    handleAlterStatus(contrast, index){
      contrast.showFlag = !contrast.showFlag
      this.$set(this.contrastProductTable, index, contrast)
    }
  },
  watch:{
    openFlag: {
      handler(nval, oldval){
        if (nval){
          this.selectedProductList = []
          this.getAuditInfo()
        }
      }
    }
  }
}
</script>

<style scoped>
.comparison-wrap{ padding:0 }

/* 两列网格：一排两个，多余的换行向下 */
.order-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }

.order-card{ border:1px solid #ebeef5; border-radius:10px; padding:10px; background:#fff; transition:all .2s ease; cursor:pointer }
.order-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.06) }
.order-card.selected{ border-color:#409eff; background:#ecf5ff }

.order-form{ margin-bottom:6px }
.order-form-row{ align-items:center }
.order-radio-col{ display:flex; align-items:center }
.ta-r{ text-align:right }

.goods-title{ font-weight:600; margin:6px 0 }

/* 小屏改一列 */
@media (max-width: 768px){ .order-grid{ grid-template-columns:1fr } }
</style>
